<template>
  <!-- 控制弹框显示与隐藏的变量，假设为dialogVisible，需要在script中定义 -->
  <div class="custom-dialog-wrapper">
    <el-dialog v-model="dialogVisible" width="600px" :show-close="false">
      <template #header>
        <div class="dialog-header">合作咨询</div>
      </template>
      <template #default>
        <div class="form-container">
          <el-form ref="ruleFormRef" label-width="80px" :label-position="labelPosition" :model="form" :rules="rules">
            <el-form-item label="您的姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="联系方式" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="您的需求" prop="demand">
              <el-input
                v-model="form.demand"
                type="textarea"
                :rows="4"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请写明您的具体需求，以便我们安排形影顾问与您联系"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <div class="cancel-btn" @click="dialogVisible = false">取消</div>
          <el-button type="primary" class="confirm-btn" @click="handleSubmit(ruleFormRef)">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
// 引入 ElDialog、ElForm 等组件，如果你使用的是自动导入，可不用手动引入
// import { ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
const labelPosition = ref('top')
import request from '@/utils/request'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref<boolean>(false)
const ruleFormRef = ref()
const form = reactive({
  name: '',
  mobile: '',
  demand: ''
})
const rules = reactive<any>({
  name: [{ required: true, message: 'Please enter the form information', trigger: 'blur' }],
  mobile: [{ required: true, message: 'Please enter the form information', trigger: 'blur' }],
  demand: [{ required: true, message: 'Please enter the form information', trigger: 'blur' }]
})
const handleSubmit = async (formEl: any) => {
  // 这里可编写提交逻辑，比如调用接口将form数据发送到后端
  if (!formEl) return
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      console.log('提交的数据：', form)
      try {
        const res = request.post('/go/api/:plat/v1/consult/apply', form)
        console.log('用户列表:', res)
        ElMessageBox.confirm('提交成功！', {
          showCancelButton: false,
          type: 'success',
          confirmButtonClass: 'confirmButtonClass'
        })
          .then(() => {
            // 提交成功后可关闭弹框
            dialogVisible.value = false
            // 可在此处添加清空表单逻辑
            form.name = ''
            form.mobile = ''
            form.demand = ''
          })
          .catch(() => {})
      } catch (error) {
        console.error('请求失败:', error)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 暴露方法用于外部控制弹框显示，比如在父组件中调用
defineExpose({
  openDialog: () => {
    dialogVisible.value = true
  }
})
</script>
<style lang="less">
.confirmButtonClass {
  display: flex;
  padding: 16px 50px;
  justify-content: center;
  border-radius: 4px;
  border: 0.5px solid var(--1060-ff, #1060ff);
  color: var(--1060-ff, #1060ff);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.confirmButtonClass {
  background: var(--1060-ff, #1060ff);
  color: #fff;
}
@media (max-width: 768px) {
  .confirmButtonClass {
    font-size: 16px;
  }

  .confirmButtonClass {
    background: var(--1060-ff, #1060ff);
    color: #fff;
  }
}
</style>
<style scoped lang="less">
:deep(.el-dialog) {
  border-radius: 20px;
  padding: 50px 70px;

  .form-container {
    padding: 0;
  }

  .el-form-item {
    margin-bottom: 30px;
  }

  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    margin-bottom: 6px;
  }

  .el-input__wrapper,
  .el-textarea__inner {
    display: flex;
    padding: 18px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 10px;
    border: 0.5px solid #b2b3b5;
    box-shadow: none;
  }

  /* 在你的全局样式文件中 */

  .el-input__inner::placeholder,
  .el-textarea__inner::placeholder {
    color: var(--b-2-b-3-b-5, #b2b3b5);
    text-align: left;
    font-size: 14px;
    font-weight: 400;
  }

  .el-textarea__inner {
    min-height: 142px !important;
  }
}

.dialog-header {
  font-size: 22px;
  color: @text-color;
  font-weight: 600;
  text-align: center;
  padding-bottom: 50px;
}

.form-container {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 30px;

  .cancel-btn,
  .confirm-btn {
    display: flex;
    width: 172px;
    height: 57px;
    padding: 16px 50px;
    justify-content: center;
    border-radius: 10px;
    border: 0.5px solid var(--1060-ff, #1060ff);
    color: var(--1060-ff, #1060ff);
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }

  .confirm-btn {
    background: var(--1060-ff, #1060ff);
    color: #fff;
  }
}

// 移动端适配（768px以下）
@media (max-width: 768px) {
  :deep(.el-dialog) {
    border-radius: 20px;
    padding: 50px 70px;

    .form-container {
      padding: 0;
    }

    .el-form-item {
      margin-bottom: 30px;
    }

    .el-form-item__label {
      font-size: 14px;
      font-weight: bold;
      line-height: 14px;
      margin-bottom: 6px;
    }

    .el-input__wrapper,
    .el-textarea__inner {
      display: flex;
      padding: 18px 16px;
      align-items: center;
      gap: 10px;
      align-self: stretch;
      border-radius: 10px;
      border: 0.5px solid #b2b3b5;
      box-shadow: none;
    }

    /* 在你的全局样式文件中 */

    .el-input__inner::placeholder,
    .el-textarea__inner::placeholder {
      color: var(--b-2-b-3-b-5, #b2b3b5);
      text-align: left;
      font-size: 14px;
      font-weight: 400;
    }

    .el-textarea__inner {
      min-height: 142px !important;
    }
  }

  :deep(.el-dialog) {
    width: 90% !important; /* 弹框宽度占屏幕90% */
    padding: 20px 15px; /* 减小内边距 */

    .el-form-item {
      margin-bottom: 15px; /* 减小表单项间距 */
    }

    .el-input__wrapper,
    .el-textarea__inner {
      padding: 12px 14px; /* 减小输入框内边距 */
    }

    .el-textarea__inner {
      min-height: 100px !important; /* 减小文本域高度 */
    }
  }

  .dialog-header {
    font-size: 18px; /* 减小标题字体 */
    padding-bottom: 25px; /* 减小标题底部间距 */
  }

  .dialog-footer {
    gap: 15px; /* 减小按钮间距 */

    .cancel-btn,
    .confirm-btn {
      width: 45%; /* 按钮宽度平分 */
      height: 44px; /* 减小按钮高度 */
      padding: 10px 0; /* 垂直居中文字 */
      font-size: 14px; /* 减小按钮文字 */
    }
  }

  // 确保输入框和按钮不超出容器
  :deep(.el-input),
  :deep(.el-textarea),
  .dialog-footer > div {
    max-width: 100%;
    box-sizing: border-box;
  }
}
</style>
